<template>
    <div style="width: 100%;" :style="{height:screenOrWh.px2vh(230)}">
        <div style="width: 100%;height: 100%;overflow: auto" class="scorll-hidden-scr">
            <div class="benqi-shangqi-base" :style="{minHeight:screenOrWh.px2vh(230),minWidth:screenOrWh.px2vw(360)}"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {firChatSizeVw,firChatSizeVh} from '@/utils/echartsFont'
import screenOrWh from "@/utils/screenOrWh";
import instance from "@/api";
let mendianshuliangEcharts = null
export default {
    name: "shangqibendizhuzhuang",
    data(){
        return {
            screenOrWh:screenOrWh,
            optionTiaoXing:{
                title: {
                    text: '本期、上期门店分析数据对比',
                    textStyle:{
                        color:'#fff',
                        fontWeight:650,
                        fontSize:firChatSizeVw(30),
                    },
                    left:0,
                    top:0,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    top:firChatSizeVh(50) + 'vh',
                    data:[{name:'上期'},{name:'本期'}],
                    textStyle:{
                        color:'#fff'
                    }
                },
                toolbox:{
                    show:true,
                    feature: {
                        // saveAsImage: {},  // 导出图片
                        magicType: {show: true, type: ['line', 'bar']},
                    }
                },
                grid: {
                    top: firChatSizeVw(100) + 'vh',
                    left: firChatSizeVw(0),
                    right: firChatSizeVw(0),
                    bottom: firChatSizeVw(0),
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, 1],
                    axisLine:{
                        show:true,
                        symbol:['none', 'arrow'],
                        lineStyle:{
                            color:'#9dc5f1'
                        }
                    },
                    splitLine:{
                        show:false,
                        interval:2,
                        lineStyle:{
                            color:'rgb(14, 174, 246)'
                        }
                    },
                    axisLabel:{
                        fontWeight: 550,
                        fontFamily:'Microsoft YaHei',
                        color: '#fff',
                    }
                },

                xAxis: {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        color:'#9dc5f1',
                        fontFamily:'Microsoft YaHei',
                        fontWeight:800,
                    },
                    axisLine:{
                        show:true,
                        symbol:['none', 'arrow'],
                        lineStyle:{
                            color:'#9dc5f1'
                        }
                    },
                },
                series: [
                    {
                        name:'本期',
                        type: 'bar',
                        data: [],
                        barWidth:firChatSizeVw(25) + 'vh',
                        label: {
                            show: true,
                            position: 'top',
                            fontFamily:'Microsoft YaHei',
                            color:'#efba0c',
                            fontWeight:600,
                        },
                        itemStyle:{
                            color:{
                                type: 'linear',
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: 'rgba(15,137,238,0.7)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgb(13,243,87)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            },
                            // borderRadius:[5,5,0,0],
                        },
                    },
                ]
            },
            barndQiId:'',
        }
    },
    mounted() {
        //初始化门店数量
        this.$nextTick(()=>{
            mendianshuliangEcharts = echarts.init(document.querySelector('.benqi-shangqi-base'));
            mendianshuliangEcharts.setOption(this.optionTiaoXing)
        })

        window.addEventListener('resize', () => {
            if(mendianshuliangEcharts){
                mendianshuliangEcharts.resize()
            }
        })
    },
    methods:{
        getMenDianNum(brandQi = ''){
            if(brandQi) this.barndQiId = brandQi
            instance.get('/base/dashboard/historyComparison',{
                params:{
                    periodId:this.barndQiId,
                    projectId:sessionStorage.getItem('projectId')
                }
            }).then(res => {
                if(res.data.code == 200){
                    if(res.data.data.length > 5){
                        this.optionTiaoXing.dataZoom = [
                            {
                                type: 'inside',
                                xAxisIndex: [0],
                                start:1,
                                end:40,
                            }
                        ]
                    }
                    this.optionTiaoXing.xAxis.data = []
                    this.optionTiaoXing.series[0].data = []
                    for(let val of res.data.data){
                        this.optionTiaoXing.xAxis.data.push(val.groupName)
                        this.optionTiaoXing.series[0].data.push(val.currentScore || 0)
                    }
                    mendianshuliangEcharts.setOption(this.optionTiaoXing)
                }
                else{
                    this.optionTiaoXing.xAxis.data = []
                    this.optionTiaoXing.series[0].data = []
                    mendianshuliangEcharts.setOption(this.optionTiaoXing)
                    this.$message.error(res.data.msg || '数据获取失败')
                }

            })
        }
    }
}
</script>

<style scoped lang="scss">
.benqi-shangqi-base{
  width: 100%;
  height: 100%;
}
</style>
